<template>
  <base-content>
    <q-table
      :title="studentNumber+' '+'不合格科目详情'"
      style="margin-top: 20px"
      :data="studentExamsDetailTable.data"
      :columns="studentExamsDetailTable.columns"
      :filter="studentExamsDetailTable.filter"
      row-key="name"
      no-data-label="没有找到任何信息"
    >
      <!-- 自定义无数据插槽 -->
      <template v-slot:no-data="{ icon, message, filter }">
        <div class="full-width row flex-center text-primary q-gutter-sm">
          <q-icon size="2em" name="sentiment_dissatisfied"/>
          <span>
             {{ message }}
          </span>
          <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon"/>
        </div>
      </template>
    </q-table>
  </base-content>
</template>

<script>
import BaseContent from '../../components/BaseContent/BaseContent'
export default {
  name: 'failsExams',
  components: { BaseContent },
  data () {
    return {
      // currentUserInfo: JSON.parse(sessionStorage.getItem('user_object')),
      studentNumber: this.$route.query.stuN,
      studentExamsDetailTable: {
        loading: false,
        filter: '',
        columns: [
          { name: 'studentNumber', label: '学号', align: 'left', field: 'studentNumber', sortable: true },
          { name: 'studentRealName', label: '姓名', align: 'left', field: 'studentRealName', sortable: true },
          { name: 'studentSex', label: '性别', align: 'left', field: 'studentSex', sortable: true },
          { name: 'gradeId', label: '年级', align: 'left', field: 'gradeId' },
          { name: 'collegeName', label: '学院', align: 'left', field: 'collegeName', sortable: true },
          { name: 'majorName', label: '专业', align: 'left', field: 'majorName', sortable: true },
          { name: 'className', label: '班级', align: 'left', field: 'className', sortable: true },
          { name: 'semesterYear', label: '学年', align: 'left', field: 'semesterYear', sortable: true },
          { name: 'semesterType', label: '学期', align: 'left', field: 'semesterType', sortable: true },
          { name: 'courseId', label: '课程号', align: 'left', field: 'courseId', sortable: true },
          { name: 'courseType', label: '课程类型', align: 'left', field: 'courseType', sortable: true },
          { name: 'courseName', label: '课程名称', align: 'left', field: 'courseName', sortable: true },
          { name: 'courseScore', label: '成绩', align: 'left', field: 'courseScore', sortable: true },
          { name: 'courseStandard', label: '课程标准', align: 'left', field: 'courseStandard', sortable: true },
          { name: 'courseCredit', label: '课程学分', align: 'left', field: 'courseCredit', sortable: true }
        ],
        data: []
      }

    }
  },
  mounted () {
    this.getStudentExamsDetail()
  },
  methods: {
    getStudentExamsDetail () {
      const query = {
        url: '/FailExamsServlet',
        methods: 'get',
        params: {
          username: this.studentNumber
        }
      }
      this.$fetchData(query).then(res => {
        if (res.data !== null) {
          console.log(res)
          this.studentExamsDetailTable.data = res.data
        } else {
          this.$q.notify({
            icon: 'announcement',
            message: '获取记录为空',
            color: 'red',
            position: 'top',
            timeout: 1500
          })
        }
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped>

</style>
